<template>
  <div>
    <el-form inline ref='form' :model='formModel' :rules='rules'>
      <el-form-item label='目的地' prop='place'>
        <el-input v-model="formModel.place" clearable></el-input>
      </el-form-item>
      <el-form-item label='出发日期' prop='startTime'>
        <el-date-picker  value-format="yyyy-MM-dd" v-model="formModel.startTime" clearable></el-date-picker>
      </el-form-item>

      <el-form-item label='到达时间' prop='endTime'>
        <el-date-picker  value-format="yyyy-MM-dd" v-model="formModel.endTime" clearable></el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import generatePortalRules from './rules'

export default {
  data () {
    return {
      rules: {},
      formModel: {
        startTime: '',
        endTime: '',
        place: ''
      }
    }
  },
  created() {
    // this.rules = this.generatRules()

    // this.rules = generatePortalRules()
    this.rules = generatePortalRules()
  },
  methods: {
    generatRules () {
      let rules = {}
      Object.keys(this.formModel).forEach(key => {
        rules[key] = [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ]
      })

      return rules
    },

    /**
     * 校验表单。 提供给父组件使用
     * @returns {Boolean}
     * @example
     * this.$refs['com-1'].checkForm()
     */
    checkForm () {
      let isOk = true

      this.$refs['form'].validate(valid => {

        isOk = valid
      })

      return isOk
    },
    /**
     * 为父组件提供校验好的数据
     */
    getFormModel () {
      return this.checkForm() ? {...this.formModel} : null
    }
  }

}
</script>
